<template>
  <div class="about">
    <h1>{{ str }}</h1>
    <h1>{{ name }}</h1>
  </div>
</template>

<script lang="ts" setup>
let str: string;
str = "hello ts";
const msg: string = "hello world";
str = msg;
let num: number = 22;
console.log("code line-12 \n\r😏 num:\n\r", num);
let bool: Boolean = 30 > 20;
console.log("code line-14 \n\r😈 bool:\n\r", bool);
const info: string = `let ${str}`;
console.log("code line-16 \n\r😈 info:\n\r", info);
let name: (string | number | boolean)[] = ["张三", false, 22];
console.log("code line-19 \n\r😐 name:\n\r", name);
let n: null = null;
console.log("code line-22 \n\r😏 null:\n\r", n);

// Symbol 生成独一无二的key
const index: Symbol = Symbol("name");
const infos = {
  index: "star",
  [Symbol("name")]: "coder",
};
console.log("code line-27 \n\r😆 info:\n\r", infos);
console.log(infos.index);
</script>
